<template>
  <p v-if="is_info" class="text-ellipsis" :title="date_str">{{date_str}}</p>
  <div v-else class="form_item-duration flex">
    <input type="hidden" :name="name" :value="value">
    <el-input-number v-model="this_value.d" :min="0" :size="size" :controls="controls" controls-position="right" @change="update_value"></el-input-number>
    <span style="margin-right: 10px;">天</span>
    <el-input-number v-model="this_value.h" :min="0" :size="size" :max="23" :controls="controls" controls-position="right" @change="update_value"></el-input-number>
    <span style="margin-right: 10px;">小时</span>
    <el-input-number v-model="this_value.i" :min="0" :size="size" :max="59" :controls="controls" controls-position="right" @change="update_value"></el-input-number>
    <span style="margin-right: 10px;">分钟</span>
    <el-input-number v-model="this_value.s" :min="0" :size="size" :max="59" :controls="controls" controls-position="right" @change="update_value"></el-input-number>
    <span style="">秒</span>
  </div>
</template>

<script>
import s94Mjs from "s94-js";
import {decode_config} from "@/js/s94_tool.js";

export default {
  _title_: '时长',
  _can_config_: true,
  _can_form_param_: true,
  _can_where_param_: true,
  name: "duration",
  props: ['name', 'value', 'config', 'is_info', 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    return {
      need_display: true,
      this_value: {d:0, h:0, i:0, s:0},
      controls: false,
    }
  },
  methods: {
    update_value(){
      let arr = this.this_value;
      let v = arr.d*60*60*24 + arr.h*60*60 + arr.i*60 + Number(arr.s);
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
    init_value(){
      let t = this.value || 0;
      this.this_value.s = t%60;
      this.this_value.i = Math.floor(t/60)%60;
      this.this_value.h = Math.floor(t/60/60)%24;
      this.this_value.d = Math.floor(t/60/60/24);
    },
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.init_value();
    }
  },
  computed: {
    date_str(){
      let options = decode_config(this.config);
      let val = s94Mjs.to_string(this.value);
      for (const i in options) {
        if (val == options[i].value) return options[i].content;
      }
      if (!/^\d+$/.test(val)) return val;
      let t = parseInt(this.value||0), str='', num=0;
      if (t >= 60*60*24) {
        num = Math.floor(t/60/60/24);
        if(num>0) str += num+'天';
      }
      if (t >= 60*60) {
        num = Math.floor(t/60/60)%24;
        if(num>0) str += num+'小时';
      }
      if (t >= 60) {
        num = Math.floor(t/60)%60;
        if(num>0) str += num+'分钟';
      }
      num = t%60;
      if(num>0 || !str) str += num+'秒';
      return str;
    }
  },
  mounted() {
    this.init_value();
  }
}
</script>

<style scoped>
.form_item-duration .el-input-number{width: 60px;}
</style>